<script setup >
import { Chart } from '@antv/g2';
import data  from "@data/indices.json";

const createChart = (containerId, data) => {
  const chart = new Chart({
    container: containerId,
    data : data,
    autoFit: true,
    height: 400,
    width : 800,
    encode : {
      x : (d) => new Date(d.Date),
      y : 'Close',
      key : 'Symbol',
      color : 'Symbol',
      enterDuration : 1000
    },
    axis : {
      x : { title : "日期" , },
      y : { title : "↑ Change in price (%)" ,labelFormatter : ( d ) => d + '%', },
    },
  });
  
  chart.line().tooltip( {
    title : ( d ) => {
      const date = new Date( d.Date );
      const year = date.getFullYear();
      const month = String( date.getMonth() + 1 );
      const day = String( date.getDate() );
      return `${ year }-${ month }-${ day }`;
    },
    items : [
      ( d, i, data, column ) => ({
        name : column.y.name,
        value : column.y.value[i].toFixed( 1 ) + "%",
      }),
    ],
  } ).transform( {
    type : "normalizeY",
    basis : "first",
    groupBy : "Symbol", // 确保分组字段与数据匹配
  } ).animate( 'enter',{
    type : 'pathIn',
    duration : 10000,
  });
  
  return chart;
};

onMounted( () => {
  try {
    // 本地数据导入方式（假设 indices.json 已正确导入）
    const chart = createChart("container-1", data);
    chart.render();
  } catch (error) {
    console.error("数据加载或图表渲染失败:", error);
  }
});
</script >

<template >
  <div id="container-1"></div>
</template >

<style scoped >

</style >